<template>
  <div id="AnalyseTable">
    <div v-for="(item,index) in questionAnalyseList" :key="index" style="height: 500px;border-radius: 20px 20px 20px 20px;">
      <el-row class="rowItem">
        <el-col :span="9" class="title" style="margin-left: 180px;margin-right: 180px">
          <div style="margin-top: 5px;">问题内容</div>
          <div style="width: 100%;border-top:2px solid #8c939d" id="name">
            <div style="margin: 5px 5px 20px;">{{item.name}}</div>
          </div>
        </el-col>
        <el-col :span="6">
          <QuestionChart :data="item.chartList" style="height: 400px"></QuestionChart>
        </el-col>
      </el-row>
      <hr>
    </div>

  </div>
</template>
<script>
import QuestionChart from "@/views/chart/QuestionChart";
import {analyse} from "@/api/questionnaire";
export default {
  name:"QuestionAnalyse",
  components: {QuestionChart},
  data(){
    return{
      questionAnalyse: {
        name:null,
        id:null,
        chartList:null
      },
      questionAnalyseList:[]
    }
  },
  methods:{
    getAll(){
      analyse(this.$route.query.id)
        .then((response) => {
          if (response.success) {
            this.questionAnalyseList=response.data
          }
        })
        .catch((e) => {
          _this.$message.error(e, "出现未知错误");
        });
    }
  },
  created() {
    this.getAll()
  }
}
</script>
<style lang="scss">
#AnalyseTable{
  background-color: #d9e9e1;
  border-radius: 50px 50px 50px 50px;
}
.title{
  margin-top: 120px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  border-radius: 15px 15px 5px 5px;
  border-style: solid;
  border-color: #8c939d;
}
#name{
  display: flex;
  justify-content: center;
  align-items: center;
}
.rowItem{
  justify-content: center;
  width: 1500px;
}
body{

}
</style>
